<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大麦演唱会数据分析与可视化系统</title>
    <style>
    /*     css代码     */
    body{
        margin:0;
        padding:0;
        font-family: Arial,sans-serif;
    }
    /*  标题的css  */
    #title_index{
        margin:0; /* 去除默认外边距  */
        display: inline-block;  /* 使h1可以居中  */
    }
    /*  标题盒子的css  */
    #div_index{
        background-color:lightblue;     /*  标题盒子的背景颜色  */
        text-align:center;              /*  文字水平居中  */
        padding:20px 0;                   /*  上下内边距     */
        width:100%;                         /*  宽度百分百  */
        box-sizing:border-box;
        position:relative;                  /*       相对定位   */
    }

    /*      箭头的css     */
     /* 箭头按钮样式 */
        .button {
            font-size: 50px;
            color: #666;
            cursor: pointer;
            user-select: none;
            padding: 0 20px;
            transition: color 0.3s;
        }

        .button:hover {
            color: #1890ff;
        }
        /*  轮播图区域的盒子   */
        #view_to_show_div{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50px auto;
        max-width: 1200px;
        position: relative;
        }
        #view{
            width:900px;
            height:600px;
            margin:0 auto;     /*  居中显示  */
        }

        /*   跳转可视化大屏的按钮css代码   */
        #btn{
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px 15px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            z-index: 1000;
        }


    </style>
    <!--    导入echarts绘图所需要的包  -->
    <script src="../static/js/echarts.min.js"></script>
	<!--    3d图形必须要导入这个库，否则不显示图形	-->
	<!-- 引入 echarts-gl 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<!--     导入词云组件	-->
	<script src="../static/js/echarts-wordcloud-2.1.0/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<!--    网页开头的标题内容  -->
<div id="div_index">
    <button id="btn">查看可视化大屏</button>
    <h1 id="title_index">大麦演唱会数据分析与可视化系统</h1>
</div>

<!--  轮播图表展示区域  -->
<div id="view_to_show_div">
    <!--  点击上一个图形  -->
     <div class="button" id="front-btn">❮</div>
    <!--  图形的展示以及分析   -->
    <div id="content">
        <div id="view"></div>
        <div id="sql"></div>
    </div>
    <!--  点击下一个图形  -->
     <div class="button" id="next-btn">❯</div>

</div>

<!-- js代码   -->
<script>
    //  todo 作图需要用到的数据
      // todo 将所有数据处理结果保存到一个全局对象中  这里函数后面加一个()是代表立即执行的概念
    //  todo 加了()的话可以直接在js文件，window.chartData.dict_data1就可以拿到数据
    //  todo 如果不加(),就是window.chartData.dict_data1()
    window.chartData = {
        // 1.饼图的数据
        dict_data1: (function() {
            var dict_data1 = [];
            var data1 = {{data1|tojson|safe}};
            for(var key in data1) {
                dict_data1.push(data1[key]);
            }
            return dict_data1;
        })(),

        // 2.折线图需要的数据
        x_data2: (function() {
            var x_data2 = [];
            var data2 = {{data2|tojson|safe}};
            for(var key in data2) {
                x_data2.push(data2[key]['x']);
            }
            return x_data2;
        })(),
        max_data2: (function() {
            var max_data2 = [];
            var data2 = {{data2|tojson|safe}};
            for(var key in data2) {
                max_data2.push(data2[key]['y']);
            }
            return max_data2;
        })(),
        min_data2: (function() {
            var min_data2 = [];
            var data2 = {{data2|tojson|safe}};
            for(var key in data2) {
                min_data2.push(data2[key]['z']);
            }
            return min_data2;
        })(),

        // 3.词云图的数据
        data3: {{data3|tojson|safe}},

        // 4.柱状图的数据
        x_data4: (function() {
            var x_data4 = [];
            var data4 = {{data4|tojson|safe}};
            for(var key in data4) {
                x_data4.push(data4[key]['name']);
            }
            return x_data4;
        })(),
        y_data4: (function() {
            var y_data4 = [];
            var data4 = {{data4|tojson|safe}};
            for(var key in data4) {
                y_data4.push(data4[key]['value']);
            }
            return y_data4;
        })(),

        // 5.环形图的数据
        data5: {{data5|tojson|safe}},

        // 6.玫瑰图的数据
        data6: {{data6|tojson|safe}}
    };
</script>
<!--   todo   导入图表配置文件(必须先加载数据，再导入图表配置文件)  并且必须注意script标签的闭合
    todo 并且js文件必须放在static目录里面，static也叫静态资源目录，templates只存放html文件-->
<script src="../static/option_arr.js"></script>

<!--  todo 切换图表的逻辑   -->
<script>
    //  定位到展示图形的盒子
    const view_div = document.getElementById("view");
    //  初始化echarts
    const my_chart = echarts.init(view_div);

    //  todo 翻页的逻辑

    //  创建一个初始索引
    let current_index=0;

    //  创建显示当前图形的方法
    function show_view(){
        // todo 清除当前图表
        my_chart.clear();

        //  获取图表配置
        var option=option_arr[current_index];
        //  展示图形
        my_chart.setOption(option);

        // todo 确保图表正确渲染
        my_chart.resize();
    }

    //  todo 初始化显示一个图形
    show_view();

    //  todo 上一页按钮点击事件
    document.getElementById("front-btn").addEventListener('click',function(){
        current_index=(current_index -1 +option_arr.length) % option_arr.length;
        show_view();
    });

    //  todo 下一页按钮点击事件
    document.getElementById("next-btn").addEventListener('click',function(){
        current_index=(current_index +1) % option_arr.length;
        show_view();
    });

    //  todo 跳转至可视化大屏
    document.getElementById("btn").addEventListener('click',function(){
        //  跳转至可视化大屏的路由
        window.location.href='/view_all';
    });
</script>




</body>
</html>